<template>
  <!-- :style="{ height: isUnfold ? '310rpx' : '140rpx' }" -->
  <view class="tab-list">
    <template v-for="v in list" :key="v.code">
      <view class="tab-list__item" @click="toDetails(v)" :style="_isLoading ? 'display:none;' : ''">
        <view class="tab-list__icon">
          <TImage
            :src="v.iconUrl"
            width="80rpx"
            height="80rpx"
            mode="scaleToFill"
            @load="imgLoad"
            @error="imgError"
          ></TImage>
        </view>
        <text class="item-title">{{ v.name }}</text>
      </view>
    </template>

    <template v-if="_isLoading">
      <view v-for="(v, i) in list.length ? list : 8" :key="i" class="tab-list__item">
        <view class="tab-list__icon _skeleton" style="width: 80rpx; height: 80rpx"></view>
        <text class="item-title _skeleton"></text>
      </view>
    </template>
    <!-- <view class="switch">
      <view class="switch-btn" @click="setUnfold">
        <text>{{ isUnfold ? '收起' : '展开' }}</text>
        <text class="ali-icon" :style="{ transform: isUnfold ? 'rotate(0)' : 'rotate(180deg)' }">
          &#xe6bf;
        </text>
      </view>
    </view> -->
  </view>
</template>

<script lang="ts" setup>
  import type { HomeTabResult } from '@/api/dynamicAllocation/types';
  import { parseConfigRouter } from '@/utils/dynamicConfig';
  import { ref, unref, type PropType, computed } from 'vue';
  import TImage from '@/components/TImage/index.vue';

  const props = defineProps({
    list: {
      type: Array as PropType<HomeTabResult[]>,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: true,
    },
  });

  function toDetails(item: HomeTabResult) {
    parseConfigRouter(item.typeOptionsId, {
      id: item.optionsId,
      title: item.optionsName,
      categoryList: item.informationCategoryList,
      linkUrl: item.linkUrl,
      officialAccountsLink: item.officialAccountsLink,
      appId: item.appId,
      pageTitle: item.name,
    });
  }

  const isUnfold = ref(false);
  function setUnfold() {
    isUnfold.value = !unref(isUnfold);
  }

  const _loadNum = ref(0);
  const imgLoad = () => {
    _loadNum.value = _loadNum.value + 1;
  };
  const imgError = () => {
    _loadNum.value = _loadNum.value + 1;
  };
  const _isLoading = computed((): boolean => {
    if (props.loading) {
      // 加载中
      return true;
    } else if (!props.loading && props.list.length && !_loadNum.value) {
      // 加载完成，有数据，但是还在渲染
      return true;
    } else {
      return false;
    }
  });
</script>

<style lang="scss" scoped>
  .tab-list {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(4, 25%);

    &__item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 30rpx;

      .item-title {
        font-size: 28rpx;
        color: #333;
        font-weight: 400;
        margin-top: 14rpx;
        min-width: 110rpx;
        min-height: 38rpx;
        text-align: center;
      }
    }
    &__icon {
      width: 80rpx;
      height: 80rpx;
      overflow: hidden;
    }
    .switch {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 36rpx;
      background-color: #fff;
      &-btn {
        width: max-content;
        height: 100%;
        background: #e9f1ff;
        border-radius: 100rpx;
        font-size: 24rpx;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10rpx;
        margin: 0 auto;
      }
      .ali-icon {
        margin-left: 10rpx;
        transition: transform 0.3s;
      }
    }
  }
</style>
